<template>
  <div>
    <!-- <Loading v-show="LOADING"></Loading> -->
    <nav-com
      title="订单详情"
      :showView='showView'
      @back="backHandler()"
    ></nav-com>
    <van-pull-refresh
      v-model='isLoading'
      @refresh='onRefresh'
    >

      <div class="d_top">
        <van-swipe :autoplay="3000">
          <van-swipe-item
            v-for="(image, index) in list"
            :key="index"
          >
            <img
              v-lazy="image"
              style="height:220px"
            />
          </van-swipe-item>
        </van-swipe>
      </div>
      <div class="d_price">
        <span><span style="font-size:3.2vw;">￥</span>{{details.price}}</span>
        <p>【升级版】{{details.subtitle}}</p>
        <div class="d_pr_p">升级通道</div>
      </div>
      <div style="height:2.6vw; background:#F4F4F4;"></div>
      <div class="details_title">
        <i></i>
        <span>权益详情</span>
      </div>
      <div class="d_details">
        <div
          class="card"
          v-html='details.content'
        ></div>
      </div>

      <div class="d_height"></div>
    </van-pull-refresh>
    <div class="d_bottom">
      <div class="d_display">
        <div
          @click="pay"
          class="d_btn"
        >立即购买</div>
      </div>
    </div>
  </div>
</template>
<script>
import navCom from "@/component/nav";
import Loading from "@/component/loading";
import {
  getItems,
  getItems2,
  shopgoodsdetail,
  createOrder,
  getAdressManagesAPI2,
  yiPayTip,
} from "@/api/api";
import { Toast } from 'vant';
export default {
  name: "odersDetails",
  components: {
    navCom,
    Loading,
  },
  data() {
    return {
      detailsId: "",
      showView: true,
      isLoading: false,
      list: [],
      details: {},
      LOADING: false,
    };
  },
  created() {
    this.one_day = this.$route.params["one_day"] || "";
    this.initDatails();
  },
  mounted() {
    // this.isTip()
  },
  methods: {
    isTip() {
      yiPayTip().then((res) => {
        if (res.data.data["status"] == "true") {
          this.$dialog
            .alert({
              title: "支付提示",
              message: "亲！您有未完成预付券支付的订单，请您及时支付，完成订单",
            })
            .then(() => {});
        }
      });
    },
    //返回
    backHandler() {
      if (weixin.isAndroid()) {
        window.JS_TROOPS.goBack();
      } else {
        this.$router.go(-1);
      }
    },
    onRefresh() {
      this.isLoading = false;
    },
    //初始化
    initDatails() {
      this.LOADING = true;
      this.detailsId = location.href.substring(
        location.href.indexOf("details/") + 8
      );
      // getItems({id:this.detailsId}).then(res=>{
      //     this.details = res.data.data
      //     this.list = res.data.data.picUrlJson.split(',')
      // })
      if(this.$route.params["from"]=='shop'){
        shopgoodsdetail({ id: this.detailsId }).then((res) => {
          this.LOADING = false;
          this.details = res.data.data;
          this.list = res.data.data.images;
          this.one_day = res.data.data.one_day;
        });
      }else{
        getItems2({ id: this.detailsId }).then((res) => {
          this.LOADING = false;
          console.log(res);
          this.details = res.data.data;
          this.list = res.data.data.images;
          this.one_day = res.data.data.one_day;
        });
      }
      
      getAdressManagesAPI2().then((res) => {
        console.log("getAdressManagesAPI2", res);
        let addressList = res.data.data;
        if (addressList.size > 1) {
          for (const address of addressList) {
            if (address.is_default == "1") {
              this.addressDetail = address;
            }
          }
        } else {
          this.addressDetail = addressList[0];
        }
      });
    },
    //购买
    pay() {
      if (this.details.stock == 0) {
        Toast("亲，该商品已售完，已通知商家尽快补货，请选择其他商品。")
        return
      }
      console.log(this.one_day);
      if (this.$route.params["from"]=='shop') {
        this.$router.push({
          name: "pay",
          params: { id: this.detailsId, one_day: 0, fromPath: "shop" },
        });
      }else if (this.one_day == 0 || this.one_day == 5) {
        this.$router.push({
          name: "pay",
          params: { id: this.detailsId, one_day: 0, fromPath: "odersDetails" },
        });
      } else if (this.one_day == 2) {
        this.$router.push({
          name: "pay2",
          params: { id: this.detailsId, one_day: 2 },
        });
      } else if (this.one_day == 1) {
        this.$router.push({
          name: "one_month_pay",
          params: { id: this.detailsId, one_day: 1 },
        });
      } else if (this.one_day == 3) {
        this.$router.push({
          name: "pay3",
          params: { id: this.detailsId, one_day: 3 },
        });
      }
    },
  },
};
</script>
<style scoped>
.card,
img,
div,
p {
  margin: 0;
  padding: 0;
  border: none;
}
.card >>> img {
  display: block;
  width: 100%;
  height: auto;
  float: left;
}
.d_top img {
  width: 100%;
}
.d_price {
  padding-left: 4vw;
  padding-bottom: 4vw;
  margin-top: 2.6vw;
}
.d_price span {
  font-size: 5.6vw;
  color: #cb041c;
}
.details_title {
  font-size: 4.2vw;
  width: 100%;
  margin-left: 4vw;
  margin-top: 4vw;
  text-align: left;
}
.details_title i {
  width: 1.066vw;
  height: 4vw;
  background: #f7541c;
  margin-top: 1vw;
  margin-right: 1.3vw;
  display: block;
  float: left;
}
.details_title span {
  float: left;
  display: block;
}
.d_details{
  clear: both;
  padding: 10px;
}
.d_pr_p {
  font-size: 2.9vw;
  color: #999;
  margin-top: 2.6vw;
}
.details_img img {
  width: 100%;
}
.d_height {
  height: 18.66vw;
}
.d_bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 18.66vw;
  background: #fff;
  height: 18.66vw;
}
.d_display {
  margin: 3.3vw;
  width: auto;
}
.d_btn {
  width: 94.66vw;
  height: 12vw;
  line-height: 12vw;
  font-size: 4vw;
  background: #d62f34;
  border-radius: 6vw;
  text-align: center;
  color: #fff;
}
</style>